<script lang="ts">
export default {
  name: "XHomePage",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
const list = ref<any>([]);
const FinRatio = [
  {
    Current_Ratio: "Current",
    LTD_Equity: "LT Debt/Equity",
    TD_Equity: "Total Debt/Equity",
    LastPriceBook: "Price/Book",
    OPM: "Oper Margin",
    NPM: "Net Margin",
    ROEquity: "Return on Equity",
    ROTA: "Return on Assets",
    _header: "1",
  },
  {
    Current_Ratio: "1.30X",
    LTD_Equity: "45.9%",
    TD_Equity: "48.3%",
    LastPriceBook: "3.78X",
    OPM: "42.6%",
    NPM: "33.9%",
    ROEquity: "26.1%",
    ROTA: "11.9%",
  },
];
const arr: any = [{}, {}, {}, {}];
FinRatio.forEach((item: any, index: number) => {
  Object.keys(item).forEach((key: string, index2: number) => {
    if (index2 >= 0 && index2 < 4) {
      const title = index ? "content1" : "title1";
      arr[index2][title] = item[key];
    }
    if (index2 >= 4 && index2 < 8) {
      const content = index ? "content2" : "title2";
      arr[index2 - 4][content] = item[key];
    }
  });
});
list.value = arr;
</script>

<template>
  <div>
    <el-table :data="list" :show-header="false" width="100%">
      <el-table-column>
        <template v-slot="{ row }">
          {{ row.title1 }}
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="{ row }">
          {{ row.content1 }}
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="{ row }">
          {{ row.title2 }}
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="{ row }">
          {{ row.content2 }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="less" scoped></style>
